<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计算属性的 getter 和 setter</title>
</head>
<body>
<div id="app">
    <h1>姓：{{ familyName }}</h1>
    <h1>名：{{ givenName }}</h1>

    <h1>姓名：{{ familyName + " " + givenName }}</h1>


    <h1>姓名：{{ fullName }}</h1>
</div>

<script type="module">
    import {createApp, ref, computed} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let familyName = ref("kevin")
                let givenName = ref("abcque")

                // 创建变量来备份，用于感知哪个发生了变化
                let familyNameBackup = familyName.value
                let givenNameBackup = givenName.value

                let language = ref("英文")

                let fullName = computed({
                        get: function () {
                            console.log("调用了 fullName");

                            if (familyName.value !== familyNameBackup) {
                                //   已经修改了 familyName
                                console.log("检测到 familyName 被修改");
                                // 跟新 familyNameBackup 的值
                                familyNameBackup = familyName.value
                            }

                            if (givenName.value !== givenNameBackup) {
                                // 已经修改了 givenName
                                console.log("检测到 givenName 被修改");
                                // 更新 givenNameBackup 的值
                                givenNameBackup = givenName.value
                            }


                            if (language.value === "英文") {
                                return familyName.value + " " + givenName.value
                            } else {
                                return familyName.value + givenName.value
                            }
                        },
                        set: function (value) {
                            if (language === "英文") {
                                let split = value.split(" ");
                                familyName.value = split[0]
                                givenName.value = split[1]
                            } else {
                                familyName.value = value[0]
                                givenName.value = value.substring(1)
                            }
                        }
                    }
                )

                return {
                    familyName, givenName, fullName, language,
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>